<template>

  <uni-popup ref="popup" type="bottom">
    <view class="chat-at-box">

      <scroll-view class="scroll-bar" scroll-with-animation="true" scroll-y="true" @scrolltolower="handleReachBottom">
        <view class="favorites-uni-swipe-action-item" v-for="(v,i) in starList" :key="i">
          <view class="favorites-wx-item" @click.stop="onSendChecked(v)">

            <view class="favorites-wx-content favorites-wx-content-text" v-if="v.type==0">
              <view class="favorites-wx-text">
                {{ returnParse(v.content).content }}
              </view>
            </view>

            <view class="favorites-wx-content favorites-wx-content-img" v-if="v.type==1">
              <image :src="returnParse(v.content).thumbUrl" mode="aspectFill"></image>
            </view>

            <view class="favorites-wx-content favorites-wx-content-img" v-if="v.type==2">
              <view class="favorites-wx-text">
                {{ returnParse(v.content).name }}
              </view>
              <view class="tool-icon iconfont icon-file"></view>

            </view>

            <view class="favorites-wx-content favorites-wx-content-voice" v-if="v.type==3">
              <view class="favorites-wx-content-voice-box">
                <view class="favorites-wx-text" @click="playVOICE(returnParse(v.content).url)">
                  <text>{{ returnParse(v.content).duration }}''</text>
                </view>
                <view class="tool-icon iconfont icon-voice-play"></view>
              </view>
            </view>

            <view class="favorites-wx-content favorites-wx-content-img" v-if="v.type==4">
              <view class="favorites-wx-content-video-img" @click="openVideo(returnParse(v.content).url)">
                <view class="favorites-wx-text">
                  {{ returnParse(v.content).name }}
                </view>
                <view class="tool-icon iconfont icon-chat-video"></view>
              </view>
            </view>

            <view class="favorites-wx-bottom">
              <text>{{ v.senderName }}</text>
              <text style="margin-left: auto">{{ v.createTimeStr }}</text>
            </view>
          </view>
        </view>
        <uni-load-more v-show="starList.length > 0" :status="queryParams.status"></uni-load-more>
      </scroll-view>

    </view>
  </uni-popup>
</template>

<script>
import UniLoadMore from "@/uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue";
import UniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue";

export default {
  name: "user-star-select-box",
  components: {UniPopup, UniLoadMore},
  data() {
    return {
      queryParams: {
        hasNextPage:true,
        refreshing: false,
        status: 'more',
        pageNum: 1,
        pageSize: 10
      },
      menu: {
        show: false,
        style: ""
      },
      starList: [],
      note: {
        content: '',
        images: [],
        videos: []
      }
    };
  },
  methods: {
    returnParse(txt) {
      return JSON.parse(txt);
    },
    openVideo(url) {
      this.$fc.plusDownload({onlinePath: url}).then(res => {
        this.$fc.plusOpenFile({filePath: res})
      })
    },
    handleReachBottom(){
      this.loadMore()
    },
    playVOICE(url) {
      if (this.paused) {
        this.innerAudioContext.destroy()
        this.paused = !this.paused
        return
      }
      this.innerAudioContext = uni.createInnerAudioContext();
      // var url='https://www.w3school.com.cn/i/horse.ogg'
      this.innerAudioContext.sessionCategory = 'soloAmbient'
      this.innerAudioContext.src = url;
      this.innerAudioContext.play()

      this.innerAudioContext.onPlay(() => {
        // console.log('播放')
        this.paused = true
      })
      this.innerAudioContext.onPause(() => {
        // console.log('暂停')
        this.paused = false
        this.innerAudioContext.destroy()
      })
    },
    onShowMenu(e) {
      uni.getSystemInfo({
        success: (res) => {
          let touches = e.touches[0];
          let style = "";
          /* 因 非H5端不兼容 style 属性绑定 Object ，所以拼接字符 */
          if (touches.clientY > (res.windowHeight / 2)) {
            style = `bottom:${res.windowHeight - touches.clientY}px;`;
          } else {
            style = `top:${touches.clientY}px;`;
          }
          if (touches.clientX > (res.windowWidth / 2)) {
            style += `right:${res.windowWidth - touches.clientX}px;`;
          } else {
            style += `left:${touches.clientX}px;`;
          }
          this.menu.style = style;
          //
          this.$nextTick(() => {
            this.menu.show = true;
          });
        }
      })
    },
    onSelectMenu(item) {
      this.menu.show = false;
      this.$http({
        url: `/user/my-star/${item.id}`,
        method: 'DELETE'
      }).then(() => {
        this.starList = this.starList.filter(n => n.id !== item.id);
      })
    },
    onHideMenu() {
      this.menu.show = false;
    },

    init() {
      this.getMyStar()
    },
    open() {
      this.$refs.popup.open();
    },
    onSendChecked(item) {
      this.$refs.popup.close();
      this.$emit("complete", item)
    },
    onClean() {
      this.showMembers.forEach((m) => {
        m.checked = false;
      })
    },
    onOk() {
      this.$refs.popup.close();
      this.$emit("complete", this.note)
    },
    onChange(e) {
      if (!e.show) {
        this.$emit("complete", this.note)
      }
    },
    loadMore() {
      if (!this.queryParams.hasNextPage) {
        return
      }
      this.queryParams.pageNum++
      this.queryParams.status = 'loading'
      this.getMyStar()
    },

    getMyStar(type) {
      this.queryParams.type = type
      this.$http({
        url: `/user/my-star`,
        method: 'GET',
        data: this.queryParams
      }).then((res) => {
        this.starList = res.list;
        this.queryParams.hasNextPage = res.hasNextPage
        if (!res.hasNextPage){
          this.queryParams.status = 'noMore'
        }
      })
    },
  },
  onLoad() {
    this.getMyStar()
  },

  computed: {
    menuItems() {
      let items = [];
      items.push({
        key: 'DELETE',
        name: '删除',
        icon: 'trash'
      });
      return items;
    },
  }
}
</script>


<style lang="scss" scoped>
.tool-icon {
  border-radius: 20%;
  background-color: white;
  color: black;
}
.iconfont {
  font-size: 35rpx;
  margin: 6rpx;
}
.chat-at-box {
  border: #dddddd solid 1rpx;
  background-color: #EDEDED;
  padding: 20rpx;

  .horizontal-container {
    display: flex; // 使用 Flexbox 布局
    flex-direction: row; // 设置为横向排列
    overflow-x: auto; // 允许横向滚动
  }

  .item {
    margin-right: 10rpx; // 设置每个 item 之间的间距
  }

  .star-image {
    width: 100rpx; // 根据需要设定图片宽度
    height: auto; // 保持纵横比
  }

  .star-image {
    width: 150rpx;
    height: 150rpx;
    border: 8rpx solid #ebebf5;
    cursor: pointer;
  }

  .scroll-bar {
    height: 700rpx;
  }

  .bgColor {
    background: #EDEDED;
  }

  .favorites-wx {
    display: flex;
    flex-direction: column;
  }

  .favorites-wx-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 0 24rpx;
    background-color: #fff;
    border-radius: 12rpx;
    padding: 38rpx;
  }

  .favorites-wx-content {
    display: flex;
    flex-direction: row;
  }

  .favorites-wx-bottom {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 12rpx;
  }

  .favorites-wx-bottom text {
    margin-right: 24rpx;
    font-size: 24rpx;
    color: #999;
  }

  .favorites-wx-top {
    margin: 24rpx;
    padding: 24rpx;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: #fff;
    border-radius: 12rpx;
    margin-bottom: 24rpx;
  }

  .favorites-wx-top-item {
    color: #5F698C;
    width: 33.333%;
    box-sizing: border-box;
    padding: 0 24rpx;
    margin: 24rpx 0;
    text-align: center;
    overflow: hidden;
  }

  .favorites-wx-top-item:nth-child(3n-1) {
    border-left: 1px #ddd solid;
    border-right: 1px #ddd solid;
  }

  .favorites-wx-content-text {
  }

  .favorites-wx-text {
    color: #333;
    font-size: 28rpx;

    display: -webkit-box; /* 使元素成为 flexbox */
    -webkit-box-orient: vertical; /* 垂直排列 */
    -webkit-line-clamp: 2; /* 限制为两行 */
    overflow: hidden; /* 隐藏超出部分 */
    text-overflow: ellipsis; /* 添加省略号 */
    line-height: 1.5; /* 行高，可根据需要调整 */
    max-height: 3em; /* 限制最大高度 (2行 * 行高) */
  }

  .favorites-wx-content-img image {
    width: 160rpx;
    height: 160rpx;
  }


  .favorites-wx-content-video {

  }

  .favorites-wx-content-video-img, .favorites-wx-content-video-img image {
    width: 160rpx;
    height: 160rpx;
    position: relative;
  }

  .favorites-wx-content-video-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .favorites-wx-content-video-icon text {
    font-size: 64rpx;
    color: #dddddd;
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
  }

  .favorites-wx-content-location {
  }

  .favorites-wx-content-location-box {
    border: 1px #f6f6f6 solid;
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: 12rpx;
    padding: 24rpx;
  }

  .favorites-wx-content-location-box-name {
    font-size: 28rpx;
    color: #101010;
    font-weight: bold;
  }

  .favorites-wx-content-location-box-address {
    font-size: 26rpx;
    color: #666;
    margin-bottom: 12rpx;
  }

  .favorites-wx-content-location-box-map {
    background-color: #e5ffff;
    overflow: hidden;
    width: 100%;
    height: 150rpx;
  }

  .favorites-wx-content-voice-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }

  .favorites-wx-content-voice {
  }

  .favorites-wx-content-voice-vmove {
    animation: scalevVoice 1s linear infinite;
    transform: scale(1);
  }

  @keyframes scalevVoice {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.3);
    }
    100% {
      transform: scale(1);
    }
  }

  .favorites-wx-content-voice-tras {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .favorites-wx-content-voice-tras text {
    padding: 6rpx 12rpx;
    font-size: 24rpx;
    background-color: #eee;
    border-radius: 12rpx;
    color: #bcbcbc;
    margin: 0 12rpx;
  }

  .favorites-wx-content-voice-content {
    padding: 12rpx 24rpx;
    border-radius: 12rpx;
    background-color: #4cd964;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .favorites-wx-content-voice-text {
    width: 100%;
    font-size: 26rpx;
    color: #666;
    word-break: break-all;
  }

  .favorites-wx-content-card {
    width: 100%;
    box-sizing: border-box;
    border: 1px #f6f6f6 solid;
    padding: 24rpx;
    border-radius: 12rpx;
  }

  .favorites-wx-content-card-top {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .favorites-wx-content-card-top-img {
    width: 80rpx;
    min-width: 80rpx;
    height: 80rpx;
    margin-right: 24rpx;
    border-radius: 6rpx;
  }

  .favorites-wx-content-card-top-content {
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .favorites-wx-content-card-title {
    color: #070707;
    font-size: 32rpx;
  }

  .favorites-wx-content-card-no {
    font-size: 24rpx;
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .favorites-wx-content-card-card {
    font-size: 24rpx;
    color: #666;
    margin-top: 24rpx;
  }

  .favorites-wx-view {
    background-color: #00aaff;
  }

  .favorites-wx-delete {
    background-color: #F55C23;
  }

  .favorites-wx-action-item-btn {
    color: #fff;
    padding: 0 24rpx;
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .favorites-wx-action-item {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  }

  .favorites-uni-swipe-action-item {
    margin-bottom: 24rpx;
  }

  .favorites-uni-swipe-action-item:nth-last-child(1) {
    margin-bottom: 0;
  }

  .favorites-wx-tips {
    width: 100%;
    color: #999;
    font-size: 24rpx;
    text-align: center;
  }
}
</style>